<template>
  <div >
    <el-card style="margin: 1vh 1vh">
        <div class="building black-text">安吉校区教师公寓</div>
    </el-card>
    <el-card style="margin: 1vh 1vh">
      <el-row :gutter="12">
        <el-col :span="6" class="left-align">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" class="el-form-search">
            <el-form-item label="楼层" prop="roomFloor" style="margin-left: 0;">
              <el-select v-model="form.roomFloor" placeholder="请选择想要查看的楼层信息：" clearable size="mini">
                <el-option
                  v-for="(item, index) in roomFloorOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
<!--      <el-col :span="4">-->
<!--        <el-form-item>-->
<!--          <el-button @click="resetForm('FloorForm')">重置</el-button>-->
<!--          <el-button type="primary" @click="onSubmit('FloorForm')">查询</el-button>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
    </el-row>

      <el-row :gutter="12">
      <div style="display: flex; justify-content: flex-end;">
      <el-col :span="4"  >
          <div class="building black-text"> 床位总数:{{totalBed}} </div>
      </el-col>
      <el-col :span="4">
        <div class="building black-text">空余房间数：{{spareRoom}} </div>
      </el-col>
      <el-col :span="4" >
        <div class="building black-text">空余床位数：{{spareBed}} </div>
      </el-col>
      <el-col :span="4" >
        <div class="building black-text">预约床位数：{{orderBed}} </div>
      </el-col>
      </div>
    </el-row>
    </el-card>
    <el-card class="FloorQuery-Box" style="margin: 1vh 1vh; height: 13vh; height: auto">
    <el-row>
      <el-col :span="0.5">
        <div style="display: flex; align-items: center; font-size: 5px">
          <span style="margin-right: 4%">全部</span><el-card shadow="hover"
                                                             style="background-color: #ffffff; width: 35%; height: 2.8vh"></el-card>
        </div>
      </el-col>
      <el-col :span="0.5">
        <div style="display: flex; align-items: center; font-size: 6px">
          <span style="margin-right: 4%">已住满</span><el-card shadow="hover"
                                                             style="background-color: rgb(252,141,174); width: 35%; height: 2.8vh"></el-card>
        </div>
      </el-col>

      <el-col :span="0.5">
        <div style="display: flex; align-items: center; font-size: 6px">
          <span style="margin-right: 4%">已预约</span><el-card shadow="hover"
                                                               style="background-color: rgb(161, 238, 204); width: 30%; height: 2.8vh"></el-card>
        </div>
      </el-col>

      <el-col :span="0.5">
        <div style="display: flex; align-items: center; font-size: 6px">
          <span style="margin-right: 4%">空置</span><el-card shadow="hover"
                                                             style="background-color:rgb(217,219,220); width: 35%; height: 2.8vh"></el-card>
        </div>
      </el-col>
      <el-col :span="0.5">
        <div style="display: flex; align-items: center; font-size: 6px">
          <span style="margin-right: 4%">入住</span><el-card shadow="hover"
                                                               style="background-color: rgb(120,197,250); width: 35%; height: 2.8vh"></el-card>
        </div>
      </el-col>
    </el-row>
    </el-card>



    <div>
      <el-card class="Building-Box" style="margin: 1vh 1vh; height: auto;">
        <div class="card-grid">
          <div v-for="data in cardData" :key="data.key" class="card" :style="{
      backgroundColor: data.checkIn === '已入住' ?
     (data.roomType === '标间' && data.guestNames.length === 1 ? 'rgb(120,197,250)' : 'rgb(252,141,174)') :
     (data.checkIn === '待清扫' ? 'rgb(161, 238, 204)' : 'rgb(217,219,220)')
    }">
            <div class="card-content">
              <div class="title-wrapper">
                <div class="title custom-title">{{ data.label }}</div>
              </div>
              <div class="item cardsblack">
                <div class="room-info">{{ getRoomInfo(data.key) }}</div>
                <div class="additional-info">
                  <div v-if="data.checkIn === '已入住'">
                    <div>入住：{{ data.checkIn }}</div>
                    <div>
                      <span>入住人：</span>
                      <span v-for="(guestName, index) in data.guestNames" :key="index">
                  {{ guestName }}{{ index < data.guestNames.length - 1 ? '、' : '' }}
                </span>
                    </div>
                  </div>
                  <div v-else>{{ data.checkIn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>

</template>
<script>
import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room";
import request from "@/utils/request";
import {housingResourcesList, orderBed, spareBed, totalBed,roomFloor} from "@/api/system/profile";
import { ElForm, ElFormItem, ElInput } from 'element-ui';

export default {
  // components: {
  //   Icon,PlusIcon
  // },
  name: "Room",
  dicts: ['room_type'],
  data() {
    return {
      cardData: [],
      roomInfo: {},
      roomTypes: [
        { label: "单间", color: "#909399" },
        { label: "标间", color: "#ffffff" },
        { label: "特殊房间", color: "#67c23a" },
      ],
      guestNames: ["刘姿婷", "曹敏侑", "林家纶", "陈小兰", "郭芳天", "谢彦文",
        "吕致盈","李中冰","江奕云","黄芸","郑昌梦","弘方","嘉慕","洪振霞"], // 人名

      // cardData: [
      //   { label: "房间1", color: "#909399", key: 1 },
      //   { label: "房间2", color: "#ffffff", key: 2 },
      //   { label: "房间3", color: "#67c23a", key: 3 },
      //   { label: "房间4", color: "#409eff", key: 4 },
      // ],
      // roomInfo: {
      //   1: { roomNum: "101", roomType: "标准间" },
      //   2: { roomNum: "202", roomType: "套房" },
      //   3: { roomNum: "303", roomType: "豪华间" },
      //   4: { roomNum: "404", roomType: "双人间" },
      // },
      totalBed: 60, // 床位总数
      spareRoom: 7, // 空余房间数
      spareBed: 40, // 空余床位数
      orderBed: 20, // 预约床位数
      roomFloor:"",
      roomData: null, // 保存房间信息数据
      hoverIndex: -1,
      currentIndex: -1,
      queryparkId: "",
      querybuildingName: "",
      floorCount: "",
      parkId: window.localStorage.getItem("chooseParkId"),
      buildingId: "",
      FloorForm: {
        parkId: window.localStorage.getItem("chooseParkId"),
        buildingId: "",
        areaMin: "",
        areaMax: "",
        contractBeginTime: "",
        contractEndTime: "",
      },
      contractData: {},
      roomDetails: {},
      querybuildingId: "",
      selectedBuildingKey: "",
      dialogVisible: false,
      drawerVisible: false,
      detailForm: {},
      detailFormActiveNames: ["1", "2", "3", "4"],
      detailVisible: false,
      orderVisible: false,
      labelPosition: "right",
      orderForm: {},
      selectedCard: null,

      tableHeight: document.documentElement.clientHeight - 180,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 房间管理表格数据
      roomList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: "create_time",
        isAsc: "desc",
        roomNo: null,
        roomType: null,
        roomStatus: null,
        roomFloor: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        areaMin: [{ required: false, message: "最小值", trigger: "blur" }],
        areaMax: [{ required: false, message: "最大值", trigger: "blur" }],
        contractBeginTime: [
          { type: "date", required: false, message: "请选择日期", trigger: "change" },
        ],
        contractEndTime: [
          { type: "date", required: false, message: "请选择日期", trigger: "change" },
        ],

        roomId: [
          { required: true, message: "房间id不能为空", trigger: "blur" }
        ],
        roomNo: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
        roomType: [
          { required: true, message: "房间类型不能为空", trigger: "change" }
        ],
        roomFloor: [
          { required: true, message: "楼层位置不能为空", trigger: "blur" }
        ],
        roomCapacity: [
          { required: true, message: "房间床位容量不能为空", trigger: "blur" }
        ],
        roomStatus: [
          { required: true, message: "房间状态不能为空", trigger: "blur" }
        ],
      },
      roomFloorOptions:[
        {
          label: "一楼",
          value: "1",
        },{
          label: "二楼",
          value: "2",
        },{
          label: "三楼",
          value: "3",
        },{
          label: "四楼",
          value: "4",
        },{
          label: "五楼",
          value: "5",
        },{
          label: "六楼",
          value: "6",
        },
      ],
      // activeNames: [""],
      floorName: "",
      query: {},
      parkName: window.localStorage.getItem("chooseParkName"),
      options: [{ value: "", label: "" }],
      Form1: {
        buildingItem: "",
      },
      activeNames: ["1"],
      floors: [],
      selectedBuilding: "1",
      dataArray: "",
      index: ""

    };
  },


  computed: {
    chunkedCardData() {
      const chunkSize = 5; // 每行显示的卡片数量
      const chunkedData = [];
      for (let i = 0; i < this.cardData.length; i += chunkSize) {
        chunkedData.push(this.cardData.slice(i, i + chunkSize));
      }
      return chunkedData;
    }
  },
  created() {
    this.generateRandomDataWithAdditionalInfo();
  },
  methods: {
    getRoomInfo(key) {
      const room = this.roomInfo[key] || {};
      return `房间类型：${room.roomType || ""}\n床位：${this.getBedInfo(room.roomType)}`;
    },
    getBedInfo(roomType) {
      return roomType === "标间" ? "2 床位" : "1 床位";
    },
    generateRandomDataWithAdditionalInfo() {
      for (let i = 1; i <= 16; i++) {
        const roomTypeIndex = Math.floor(Math.random() * this.roomTypes.length);
        const roomType = this.roomTypes[roomTypeIndex];
        const color = roomType.color;
        const floor = Math.floor(Math.random() * 6) + 1; // 生成1到6之间的随机楼层号
        const roomInFloor = Math.floor(Math.random() * 10) + 1; // 生成1到10之间的随机房间序号

        // 使用随机概率来确定入住状态，但为了实现灰色和绿色待清扫的两种情况，我们分别控制概率
        let checkIn;
        if (Math.random() < 0.3) {
          checkIn = "未入住"; // 30% 的概率显示未入住的灰色卡片
        } else {
          checkIn = Math.random() < 0.5 ? "已入住" : "待清扫"; // 70% 的概率显示已入住或待清扫的绿色卡片
        }

        // 添加判断，如果是 "已入住"，则随机生成入住人名
        const guestNames = checkIn === "已入住" ? this.getRandomGuestNames(roomType.label) : [];

        // 根据楼层和房间序号生成房间号，确保楼层和房间序号是两位数
        const formattedFloor = floor.toString();
        const formattedRoomInFloor = roomInFloor < 10 ? `0${roomInFloor}` : roomInFloor.toString();
        const roomNum = `${formattedFloor}${formattedRoomInFloor}`;

        this.cardData.push({
          label: `${roomNum}房间`,
          color: color,
          key: i,
          checkIn: checkIn,
          guestNames: guestNames,
          roomType: roomType.label,
        });

        this.roomInfo[i] = {
          roomNum: roomNum,
          roomType: roomType.label,
        };
      }
    },



    getRandomGuestNames(roomType) {
      const maxGuests = roomType === "标间" ? 1 : 1;
      const shuffledNames = this.guestNames.sort(() => Math.random() - 0.5);
      return shuffledNames.slice(0, maxGuests);
    },
  },

};

</script>

<style scoped>
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.card {
  //background-color: rgba(101, 167, 233, 0.35);
  border-radius: 20px; /* 增加 border-radius 的值以使卡片的圆角更圆润 */
  padding: 10px;
}

.card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cardsblack {
  white-space: pre-line;
  font-size: 15px;
  color: black; /* 修改颜色为黑色 */
}

.title {
  font-size: large;
  font-weight: bold;
  margin-bottom: 2%;
}

.item {
  font-size: medium;
  font-weight: 500;
}

.highlightwhite {
  border: 2px solid #409EFF;
}


.custom-title:hover {
  background-color: yellow;
}

.title-wrapper {
  position: relative;
  z-index: 1;
}
.title-wrapper:hover {
  background-color: rgba(23, 132, 227, 0.35);
}
</style>
